import React from 'react';
import {Provider} from 'react-redux';
import * as Bootstrap from 'react-bootstrap';
import BaseContainer from './BaseStepContainer';

import * as action from "../actions/EducationWorkContainerAction";
import {educationWorkContainerStore} from '../stores/EducationWorkContainerStore';
import  './EducationWork.less';

import * as  CommonUtil from '../util/CommonUtil';

export default class EducationWorkContainer extends BaseContainer {

    constructor(props) {
        super(props);
        this.state.stepName = "EducationWork";
    };

    contentRender() {

        let educationRenderList = [], workRenderList = [];
        if (this.state) {
            const {educationList, workList} =this.state;

            if (educationList) {
                educationList.map((item, index)=> {
                    const {schoolName, step, major, startDate, endDate} =item;
                    educationRenderList.push(
                        <Bootstrap.ListGroupItem header={schoolName} key={index}>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={4}>
                                    {this.getStartEndDate(startDate, endDate)}
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={4}>
                                    {step}
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={4}>
                                    {major}
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                        </Bootstrap.ListGroupItem>
                    );
                });
            }

            if (workList) {
                workList.map((item, index)=> {
                    const {companyName, counterpart, business, startDate, endDate} =item;
                    workRenderList.push(
                        <Bootstrap.ListGroupItem header={companyName} key={index}>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={4}>
                                    {this.getStartEndDate(startDate, endDate)}
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={4}>
                                    {counterpart}
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={4}>
                                    {business}
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                        </Bootstrap.ListGroupItem>
                    );
                });

            }

        }

        return (
            <Provider store={educationWorkContainerStore}>
                <Bootstrap.Row>
                    <Bootstrap.Col xs={8} xsOffset={2}>
                        <Bootstrap.Panel header="教育经历" bsStyle="info">
                            <Bootstrap.ListGroup fill>
                                {educationRenderList}
                            </Bootstrap.ListGroup>
                        </Bootstrap.Panel>
                        <Bootstrap.Panel header="工作经历" bsStyle="success">
                            <Bootstrap.ListGroup fill>
                                {workRenderList}
                            </Bootstrap.ListGroup>
                        </Bootstrap.Panel>
                    </Bootstrap.Col>
                </Bootstrap.Row>
            </Provider>
        );
    }

    componentWillMount() {
        const {self}= this.state;
        educationWorkContainerStore.subscribe(() => {
            const {educationReducer, workReducer} = educationWorkContainerStore.getState();
            self.reloadEducation(educationReducer);
            self.reloadWork(workReducer);
        });
        educationWorkContainerStore.dispatch(action.getEducation());
        educationWorkContainerStore.dispatch(action.getWork());
    }

    reloadEducation(educationReducer) {
        if (educationReducer.isChange) {
            educationReducer.payload.then((data) => {
                const {code, result} = data;
                if (1 == code) {
                    this.setState({
                        "educationList": result
                    });
                }
            });
        }
    }

    reloadWork(workReducer) {
        if (workReducer.isChange) {
            workReducer.payload.then((data) => {
                const {code, result} = data;
                if (1 == code) {
                    this.setState({
                        "workList": result
                    });
                }
            });
        }
    }

    getStartEndDate(startDate, endDate) {
        const YYYY_MM = "yyyy年MM月";

        let startDateYM = "";
        let endDateYM = "至今";

        if (startDate) {
            const dStartDate = new Date();
            dStartDate.setTime(startDate);
            startDateYM = CommonUtil.dateFormat(dStartDate, YYYY_MM);
        }

        if (endDate) {
            const dEndDate = new Date();
            dEndDate.setTime(endDate);
            endDateYM = CommonUtil.dateFormat(dEndDate, YYYY_MM);
        }

        return startDateYM + "-" + endDateYM;
    }

}
